<template>
    <div class="navbar">
        <div v-for="item in navBarList" :key="item.path">
            <router-link class="nav-list-item active" :to="item.path">{{ item.name }}</router-link>
        </div>
    </div>

</template>

<script>
import { reactive,toRefs } from 'vue';
export default{
    name: "NavBar",
    setup() {
        const state = reactive({
            isActive:true,
        });
        const navBarList = [
            {
                path: "home",
                name:"首页",
            },
            {
                path:"category",
                name:"分类"
            },
            {
                path:"cart",
                name:"购物车",
            },
            {
                path:"person",
                name:"我的"
            },
        ];
        return {
            navBarList: navBarList,
            ...toRefs(state),
        };
    },
};


</script>
<style lang="less" scoped>
@import "@/common/style/mixin.less";
.navbar {
    width: 100%;
    text-align: center;
    background: white;
    z-index: 10000;
    color:black;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    height: 3rem;
    display: flex;
    position: fixed;
    left:0 ;
    bottom:0;
    &.router-link-active {
        color:@primary;
    }
    div {
        flex:1;
        display:flex;
        align-items:center;
        justify-content: center;
        > a {
            color:black;
        }
    }
    .slide-fade-enter-active {
        transition: all 0.3s ease-out;
    }

    .slide-fade-leave-active {
        transform: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter-from,
    .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
}
</style>